<template>
  <div class="photoInfo">
    <div class="top">
      <h1>{{ contact[0].title }}</h1>
      <p>
        <span>发表时间: {{ contact[0].add_time | dataTime }}</span>
        <span>点击: {{ contact[0].click }} 次</span>
      </p>
      <!-- 缩略图部分 -->
      <vue-preview :slides="slide"></vue-preview>
      <!-- 内容 -->
      <div class="contact" v-html="contact[0].contact"></div>
      <comment :id="id"></comment>
    </div>
  </div>
</template>

<script>
import comment from '../../components/comment/Comment'
export default {
  name: "photoInfo",
  components: {
    comment
  },
  data() {
    return {
      id: this.$route.query.id,
      contact: [
        { id: 12, title: "标题美女图片", click: 3, add_time: "1563858964", contact: "描述及司法机构和看到几个房间零零反对开挂看看付款就尴尬科夫列夫让你" }
      ],
      slide: []
    }
  },
  created() {
    // this.getPhotoInfo()
    this.getPhotoList()
  },
  methods: {
    getPhotoInfo() {
      // 获取图片详情页面信息
      this.$axios.get("http://suggest.taobao.com").then(response => {
          // 请求成功
        })
        .catch(error => {
          // 请求失败
        });
    },
    getPhotoList () {
      // 获取图片缩略图 this.$route.query.id id传过去
      /* this.$axios.get("http://suggest.taobao.com").then(response => {
          // 请求成功
        })
        .catch(error => {
          // 请求失败
        }); */
      // 自己定义图片缩略图
      let photoList = [
        { imgg_url: "http://img0.ph.126.net/WPoHgfhyqEjUG_HP2AK7ow==/6631872608210454282.jpg" },
        { imgg_url: "http://g2.hexunimg.cn/2014-09-24/168807667.jpg" },
        { imgg_url: "http://pic.eastlady.cn/uploads/tp/201708/9999/a59e36b8f5.jpg" },
        { imgg_url: "http://img1.ph.126.net/eTs_Xr4pMNivYxwtyvaTiw==/3828904108295067994.jpg" },
        { imgg_url: "http://imgk.zol.com.cn/dcbbs/9659/a9658161_s.jpg" },
        { imgg_url: "http://s3.sinaimg.cn/bmiddle/4de3b15eg7c2d99261332&690" },
      ]
      // 循环接口数据，添加属性，使图片能点击播放
      photoList.forEach(item => {
        item.msrc = item.src = item.imgg_url
        item.w = 400
        item.h = 500
      })
      this.slide = photoList
    }
  }
};
</script>

<style lang="scss">
.my-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  figure {
    padding: 8px;
    img {
      box-shadow: 0 0 8px #999;
    }
  }
}
.photoInfo {
  padding: 8px;
  .top {
    img {
      width: 100px;
      height: 100px;
    }
    h1 {
      color: blue;
      font-size: 22px;
      text-align: center;
      margin-bottom: 18px;
    }
    p {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
    }
    .contact {
      border-top: 2px solid #c0c0c0;
      margin-top: 10px;
      padding-top: 10px;
      line-height: 30px;
      font-size: 16px;
    }
  }
}
</style>